<template>
    <div class='menu-page'>
        <el-row>
            <el-button type="primary" size="medium" @click="updateShow(1)">新增目录</el-button>
        </el-row>
        <el-table :data="tableData" border class="table" :max-height="clienHeight - 300" row-key="id"
            :tree-props="{ children: 'subMenus' }">
            <el-table-column prop="name" label="菜单名称" width="120" align="center">
            </el-table-column>
            <el-table-column prop="code" label="菜单代码" width="120" align="center">
            </el-table-column>
            <el-table-column prop="parentName" label="上级菜单" width="120" align="center">
            </el-table-column>
            <el-table-column prop="icon" label="图标" width="80" align="center">
                <template slot-scope="scope">
                    <svg-icon :icon-class="'icon-' + scope.row.icon" className="icon"></svg-icon>
                </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width="80" align="center">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.type ? 'success' : ''">{{ scope.row.type ? "菜单" : "目录" }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="url" label="菜单URL" align="center">
            </el-table-column>
            <el-table-column prop="perm" label="权限标识" align="center">
            </el-table-column>
            <el-table-column prop="isHidden" label="是否隐藏" width="100" align="center">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.isHidden ? 'success' : ''">{{ scope.row.isHidden ? "隐藏" : "展示"
                        }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序号" width="80" align="center">
            </el-table-column>
            <el-table-column label="操作" width="240" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" @click="updateShow(scope.row.type ? 4 : 3, scope.row)">修改</el-button>
                    <el-button type="warning" size="mini" @click="updateShow(2, scope.row)"
                        v-if="!scope.row.type">新增菜单</el-button>
                    <el-button type="danger" size="mini" @click="handlerDelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <menuData ref="roleDialog" v-if="show" @close="handerClose"></menuData>
    </div>
</template>

<script>
import menuData from './menuData.vue'
import { mapState } from 'vuex';
import { menuAPI } from '@/http'
import { confirm } from '@/utils'
export default {
    name: 'menu-page',
    /**
    * 定义组件的data函数，用于声明组件内部的状态。
    * 
    * @returns {Object} 返回一个对象，其中包含组件内部的状态。这些状态将在组件的生命周期内被管理和使用。
    */
    data() {
        return {
            show: false,
            tableData: [],
        }
    },
    components: {
        menuData
    },
    created() {
        this.getTableList()
    },
    computed: {
        ...mapState(['clienHeight'])
    },
    methods: {
        updateShow(type, row) {
            this.show = true
            this.$nextTick(() => {
                this.$refs.roleDialog.open(type, row)
            })
        },
        handerClose(val) {
            this.show = false
            if (val) {
                this.getTableList()
            }
        },
        handlerDelete(id) {
            //console.log('asada', id);
            confirm(() => {
                menuAPI.deletaFn(id).then(res => {
                    if (res.code === 200) {
                        this.$message({
                            message: '用户删除操作成功',
                            type: 'success',
                        })
                        this.getTableList()
                    }
                    else {
                        this.$message({
                            message: res.msg,
                            type: 'warning',
                        })
                    }
                })
            }, `对[id=${id}]的用户进行删除`)
        },
        changStatus(row) {
            let { id, status } = row
            let title = status == 1 ? '启用' : '禁用'
            confirm(() => {
                menuAPI.changStatus({
                    id: id,
                    status: status ? 0 : 1
                }).then(res => {
                    if (res.code === 200) {
                        this.$message({
                            message: title + '成功',
                            type: 'success',
                        })
                        this.getTableList()
                    }
                    else {
                        this.$message({
                            message: res.msg,
                            type: 'warning',
                        })
                    }
                })
            }, `对[id=${id}]的用户进行[${title}]`)


        },
        //获取页面数据
        getTableList() {
            menuAPI.getList().then(res => {
                // //console.log('数据：', res.data);
                if (res.code === 200) {
                    this.tableData = res.data
                }
            })
        }
    }
}
</script>

<style scoped lang="less">
.menu-page {
    .table {
        margin: 20px 0;
        width: 100%;
    }
}
</style>